<template>
	<view class="page">
		<view class="info">
			<view class="info-item-head">
				<view class="info-userface">
					<image :src="$getImgUrl(infoContent.WxImg)" alt="" class="info-userpicture" mode="aspectFill"></image>
					<view class="info-item-istope" v-if="infoContent.Istop == 1">置顶</view>
				</view>
				<view class="info-item-briefing">
					<view class="info-briefing-title">
						<view class="info-briefing-class">{{ infoContent.LmName }}</view>
						<view class="info-briefing-name">{{ infoContent.Person }}</view>
						<view class="info-forward" @click="openCreadPoster()">转发朋友圈</view>
					</view>
					<view class="info-briefing-tag">
						<view class="info-briefing-tag-item" v-for="(infoLdItem, infoLdIndex) in infoContent.LdList" :key="infoLdIndex">{{ infoLdItem.LiangDian }}</view>
					</view>
				</view>
			</view>
			<view class="info-item-condition">
				<block v-for="(infoAttribute, attributeIndex) in infoContent.HMJXX" :key="attributeIndex">
					<text class="info-item-condition-text" :class="{ 'info-item-condition-text-rightline': attributeIndex < infoContent.HMJXX.length - 1 }">
						{{ infoAttribute.shuju }}
					</text>
				</block>
			</view>
			<view class="info-item-content">{{ infoContent.BeiZhu }}</view>
			<view class="info-item-img-group">
				<block v-for="(infoItemImg, infoItemImgIndex) in infoContent.TpList" :key="infoItemImgIndex">
					<image :src="$getImgUrl(infoItemImg.imgpath)" mode="aspectFill" class="info-item-img" @click="infoimagePreview(infoItemImgIndex)"></image>
				</block>
			</view>
			<view class="info-item-menu">
				<view class="info-item-menu-group">
					<view class="info-menu-views" v-if="infoContent.IsXian">{{ infoContent.Hits }} 人浏览</view>
					<view class="info-menu-views">{{ infoContent.PLCount }} 回复</view>
					<view class="info-menu-views">{{ infoContent.SCCount }} 收藏</view>
				</view>
				<view class="info-rport" @click="gotoinfoReport">
					<image src="../../static/infoIco/jb.png" mode="aspectFill" class="info-rport-img"></image>
					<text class="info-report-txt">举报</text>
				</view>
			</view>
		</view>
		<view class="" style="height:5px;background-color:#f8f8f8"></view>
		<view class="info-item-other">
			<view class="info-other-list">
				<text class="info-other-list-font">发布时间：</text>
				<text class="info-other-list-font">{{ setTimeTxt(infoContent.ShiJian) }}</text>
			</view>
			<view class="info-other-list">
				<text class="info-other-list-font">地址信息：</text>
				<text class="info-other-list-font info-other-list-address-content">{{ infoContent.Address != 'undefined' ? infoContent.Address : '未获得定位信息' }}</text>
			</view>
			<view class="info-other-list info-other-list-phonegroup">
				<view class="info-other-list-phone">
					<text class="info-other-list-font">联系电话：</text>
					<text class="info-other-list-font">{{ infoContent.Phone }}</text>
				</view>
				<view class="info-other-list-callphone" @click.stop="callPhone(infoContent.Phone)">
					<image src="../../static/infoIco/call.gif" mode="aspectFill" class="info-other-list-callphone-img"></image>
					<text class="info-other-list-callphone-text">拨打电话</text>
				</view>
			</view>
		</view>
		<view class="info-item-defaulttext">联系我时，请说是在《百业信息》报上看到的信息哦！</view>
		<view class="" style="height:5px;background-color:#f8f8f8"></view>
		<view class="info-comment">
			<view class="info-comment-title">评论</view>
			<view class="info-comment-uncontent" v-if="infoContent.PLCount == 0">
				<image src="../../static/infoIco/comment_none.png" mode="aspectFill" class="info-comment-uncontent-img"></image>
			</view>
			<view class="info-comment-content" v-else>
				<view class="info-comment-child" v-for="(commentItem, commentIndex) in infoComment" :key="commentIndex">
					<view class="info-comment-reply" @click.stop="commentReply(commentItem.com_id)">点击回复</view>
					<view class="info-comment-username">{{ commentItem.com_name }}:</view>
					<view class="info-comment-usercontent">{{ commentItem.content }}</view>
					<block v-for="(replyItem, replyIndex) in commentItem.rep_lst" :key="replyIndex">
						<view class="info-comment-reply-username">
							<text>{{ replyItem.rep_name }}:</text>
							回复 {{ replyItem.rep_name }}
						</view>
						<view class="info-comment-reply-usercontent">{{ replyItem.content }}</view>
					</block>
				</view>
				<view style="height:90rpx;"></view>
			</view>
		</view>
		<view class="info-content-menu">
			<view class="info-content-menu-left-group">
				<view class="info-content-menu-left-item" @click="gotoHomeTab">
					<image src="../../static/tabBarIco/index_sel.png" mode="aspectFill" class="info-content-menu-left-img"></image>
					<text class="info-content-menu-left-item-text" style="color: #c8000a;">首页</text>
				</view>
				<view class="info-content-menu-left-item">
					<!-- #ifdef APP-PLUS -->
					<image src="../../static/tabBarIco/footer_return.png" mode="aspectFill" class="info-content-menu-left-img"></image>
					<text class="info-content-menu-left-item-text">分享</text>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<button open-type="share" class="info-content-menu-left-item-buttom">
						<image src="../../static/tabBarIco/footer_return.png" mode="aspectFill"></image>
						<text>分享</text>
					</button>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<image src="../../static/tabBarIco/footer_return.png" mode="aspectFill" class="info-content-menu-left-img"></image>
					<text class="info-content-menu-left-item-text">分享</text>
					<!-- #endif -->
				</view>
				<view class="info-content-menu-left-item" @click.stop="setInfoCollection()">
					<image src="../../static/infoIco/footer_sc.png" mode="aspectFill" class="info-content-menu-left-img" v-if="infoContent.IsSC == 0"></image>
					<image src="../../static/infoIco/footer_sc_active.png" mode="aspectFill" class="info-content-menu-left-img" v-else-if="infoContent.IsSC == 1"></image>
					<text class="info-content-menu-left-item-text">收藏</text>
				</view>
			</view>
			<view class="info-content-menu-right-group" @click="postComments()">
				<image src="../../static/infoIco/footer_comment.png" mode="aspectFill" class="info-content-menu-right-img"></image>
				<text class="info-content-menu-right-text">我要评论</text>
			</view>
		</view>
		<view class="bottem">
			<view class="info-content-floating-menu-group">
				<view class="info-content-floating-menu-show" v-show="isShowTip">
					<view class="info-content-floating-menu-item">发布</view>
					<!-- #ifdef MP-WEIXIN -->
					<!-- <button class='piaofukefubutton' open-type="contact">微信</button> -->
					<view class="info-content-floating-menu-item">微信</view>
					<!-- #endif -->
					<view class="info-content-floating-menu-item">举报</view>
				</view>
				<view class="info-content-menubutton" @click.stop="showTip">
					<image :src="isShowTip ? '../../static/infoIco/23.png' : '../../static/infoIco/24.png'" mode="aspectFill" class="info-content-menubutton-img"></image>
				</view>
			</view>
		</view>
		<lj-modal ref="modal"></lj-modal>
		<!-- 全局message组件 -->
		<QuickMessage ref="message"></QuickMessage>
	</view>
</template>

<script>
import { getDateDiff, getFormatTime } from '../../common/common.js';
import ljModal from '@/components/lj-modal/lj-modal.vue';
import QuickMessage from '@/components/quick-message/quick-message.vue';
export default {
	data() {
		return {
			infoId: 0,
			infoContent: {},
			infoComment: {},
			isShowTip: true,
			isComment: true,
			share:{
				title:'',
				imageUrl:'',
			}
		};
	},
	onLoad(option) {
		this.infoId = option.infoId;
		if (typeof this.infoId == 'undefined') {
			this.gotoHomeTab();
		}
		this.getInfoContent();
		this.getInfoComment();
		this.getInfoIsComment();
	},
	methods: {
		setTimeTxt(time) {
			return getDateDiff(parseInt(time) * 1000) + ' ' + getFormatTime(parseInt(time), 'Y-M-D h:m:s');
		},
		getInfoContent() {
			this.$api.getInfoContent({ id: this.infoId, openid: getApp().globalData.openid }).then(res => {
				// console.log(res.data)
				this.infoContent = res.data;
			});
		},
		getInfoComment() {
			this.$api.getInfoComment({ xxid: this.infoId }).then(res => {
				// console.log(res.data)
				this.infoComment = res.data;
			});
		},
		getInfoIsComment() {
			this.$api.getInfoIsComment().then(res => {
				console.log(res);
				if (res.data.IsPl) {
					this.isComment = false;
				} else {
					this.isComment = true;
				}
			});
		},
		infoimagePreview(index) {
			let infoimages = [];
			this.infoContent.TpList.forEach(tupianItem => {
				infoimages.push(this.$getImgUrl(tupianItem.imgpath));
			});
			uni.previewImage({
				current: index,
				urls: infoimages
			});
		},
		callPhone(phone) {
			uni.makePhoneCall({
				phoneNumber: phone //仅为示例
			});
		},
		gotoHomeTab() {
			uni.switchTab({
				url: '../index/index'
			});
		},
		gotoinfoReport() {
			uni.navigateTo({
				url: '../infoReport/infoReport?infoid=' + this.infoContent.ID + '&classid=' + this.infoContent.LanMuID
			});
		},
		setInfoCollection() {
			this.$api.setInfoCollection({ xxid: this.infoContent.ID, openid: getApp().globalData.openid }).then(res => {
				console.log(res);
				if (this.infoContent.IsSC == 1) {
					this.infoContent.IsSC = 0;
				} else {
					this.infoContent.IsSC = 1;
				}
				this.$forceUpdate(); // 进行强制渲染,效果实现。
				uni.showToast({
					title: res.msg,
					icon: 'success'
				});
			});
		},
		showTip() {
			this.isShowTip = !this.isShowTip;
		},
		postComments() {
			if (!this.isComment) {
				return;
			}
			this.$refs.modal.showModal({
				title: '发布评论', // 提示标题
				// content: '输入您的评论', // 提示内容
				cancelText: '取消', // 取消按钮的文字
				confirmText: '确定', // 确认按钮文字
				showCancel: true, // 是否显示取消按钮，默认为 true
				confirmColor: '#3CC51F', // 确定按钮颜色
				cancelColor: '#c70109', // 取消按钮颜色
				textAlign: 'center', // 对齐方式
				confirmOpenType: '', // 确定按钮open-type
				cancelOpenType: '', // 取消按钮open-type
				editable: true, // 是否显示输入框
				editableType: 'textarea', // 输入文本框类型 input textarea
				placeholderText: '请输入您的评论', // 显示输入框时的提示文本
				success: res => {
					console.log(res);
					if (res.confirm) {
						if (res.inputText) {
							let commentText = res.inputText;
							this.$api.checkTextContent({ filewz: commentText }).then(res => {
								if (res.errcode != 0) {
									this.showMessage('error', '文字内容违规，请重新发布评论', 'center');
								} else {
									this.$api.postInfoComment({ OpenId: getApp().globalData.openid, xxid: this.infoId, Content: commentText }).then(res => {
										uni.showToast({
											title: res.data.msg,
											icon: 'success',
											duration: 2000
										});
										this.getInfoComment();
									});
								}
							});
						}
						// uni.showToast({
						// 	title: '点击了确定',
						// 	icon: 'none',
						// 	duration: 2000
						// })
					} else {
						// uni.showToast({
						// 	title: '点击了取消',
						// 	icon: 'none',
						// 	duration: 2000
						// })
					}
				} // 回调方法
			});
		},
		openCreadPoster() {
			uni.navigateTo({
				url:'../creadPoster/creadPoster?infoId=' + this.infoId
			})
		},
		commentReply(id) {
			this.$refs.modal.showModal({
				title: '回复', // 提示标题
				// content: '输入您的评论', // 提示内容
				cancelText: '取消', // 取消按钮的文字
				confirmText: '确定', // 确认按钮文字
				showCancel: true, // 是否显示取消按钮，默认为 true
				confirmColor: '#3CC51F', // 确定按钮颜色
				cancelColor: '#c70109', // 取消按钮颜色
				textAlign: 'center', // 对齐方式
				confirmOpenType: '', // 确定按钮open-type
				cancelOpenType: '', // 取消按钮open-type
				editable: true, // 是否显示输入框
				editableType: 'textarea', // 输入文本框类型 input textarea
				placeholderText: '请输入回复内容', // 显示输入框时的提示文本
				success: res => {
					console.log(res);
					if (res.confirm) {
						if (res.inputText) {
							let commentText = res.inputText;
							this.$api.checkTextContent({ filewz: commentText }).then(res => {
								if (res.errcode != 0) {
									this.showMessage('error', '文字内容违规，请重新发布评论', 'center');
								} else {
									this.$api.postCommentsReply({ Openid: getApp().globalData.openid, plid: id, Content: commentText }).then(res => {
										uni.showToast({
											title: res.data.msg,
											icon: 'success',
											duration: 2000
										});
										this.getInfoComment();
									});
								}
							});
						}
						// uni.showToast({
						// 	title: '点击了确定',
						// 	icon: 'none',
						// 	duration: 2000
						// })
					} else {
						// uni.showToast({
						// 	title: '点击了取消',
						// 	icon: 'none',
						// 	duration: 2000
						// })
					}
				} // 回调方法
			});
		}
	},
	//此函数仅仅支持在小程序端分享，分享到微信
	onShareAppMessage(res) {
		return {
			title: this.infoContent.LmName,
			path: '/pages/infoContent/infoContent?infoId=' + this.infoId,
			content: this.infoContent.BeiZhu
		};
	},
	computed: {
		// this.infoContent.HMJXX.length
	},
	components: {
		ljModal,
		QuickMessage
	}
};
</script>

<style scoped>
@import url('infoContent.css');
</style>
